<template>
  <div style="padding: 30px">
    <a-statistic
      title="Active Users"
      :value="112893"
      style="margin-right: 50px"
    />
    <a-statistic title="Activities" :precision="2" :value="114514" />
    <a-progress type="circle" :percent="10" :format="() => 'Administer'" />

    <div style="background: #ececec; padding: 30px">
      <a-row :gutter="16">
        <a-col :span="12">
          <a-card>
            <a-statistic
              title="Feedback"
              :value="11.28"
              :precision="2"
              suffix="%"
              :value-style="{ color: '#3f8600' }"
              style="margin-right: 50px"
            >
              <template #prefix>
                <a-icon type="arrow-up" />
              </template>
            </a-statistic>
          </a-card>
        </a-col>
        <a-col :span="12">
          <a-card>
            <a-statistic
              title="Idle"
              :value="9.3"
              :precision="2"
              suffix="%"
              class="demo-class"
              :value-style="{ color: '#cf1322' }"
            >
              <template #prefix>
                <a-icon type="arrow-down" />
              </template>
            </a-statistic>
          </a-card>
        </a-col>
      </a-row>
    </div>
  </div>
</template>


<script>
export default {};
</script>

<style>
</style>